
import React from 'react';
import { Form, InputNumber, Checkbox, Radio } from 'antd';
import { Drawer, Tabs, Space, Button } from 'antd';

import MeasurementTree from './MeasurementTree'

import intl from '../intl'
import { TableType } from '../core/common'
import { RealFillHoder, FillHepler } from '../core/fill'


class FillRealChooser extends React.Component {
  constructor(props) {
    super(props);

    this.onValuesChange = this.onValuesChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.onFinish = this.onFinish.bind(this);
    this.onFinishFailed = this.onFinishFailed.bind(this);
    this.onTabChange = this.onTabChange.bind(this);

    this.form1Ref = React.createRef();
    this.form2Ref = React.createRef();

    const tableTypeOptions = TableType.optionsForReal();
    this.state = {
      activeKey: '1',
      tableType: tableTypeOptions[0].value,
      tableTypeOptions,
    };
  }

  onTabChange(activeKey) {
    this.setState({ activeKey });
  }

  handleSubmit() {
    this.form1Ref.current.submit();
  }
  onFinish(values) {
    const values2 = this.form2Ref.current.getFieldsValue();
    values = Object.assign(values, values2);
    console.log('Success:', values);
    const { measurement } = values;
    const helper = new FillHepler(window.luckysheet, this.props.config.book_type);

    // 添加列名
    measurement.forEach((point, index) => {
      helper.setCellValue(0, index, point.point_desc);

      const realHolder = new RealFillHoder({ ...values, id: point.point_id });
      helper.setCellValue(1, index, realHolder);
    });

    this.props.onComplete();
  };
  onFinishFailed(errorInfo) {
    console.log('Failed:', errorInfo);
    this.setState({ activeKey: '1' });
  };

  onValuesChange(changedValues, allValues) {
    console.log('onValuesChange', changedValues, allValues);
    if ('table_type' in changedValues) {
      this.setState({ tableType: changedValues.table_type });
    }
  };

  render() {
    const { config, open, onCancel } = this.props;
    const state = this.state;
    const initialValues = {
      table_type: state.tableType,
      zero: config.zero,
    };

    const form1 = (
      <Form
        colon={false}
        labelCol={{ span: 4, }}
        wrapperCol={{ span: 20, }}
        ref={this.form1Ref}
        initialValues={initialValues}
        onValuesChange={this.onValuesChange}
        onFinish={this.onFinish}
        onFinishFailed={this.onFinishFailed}>

        <Form.Item
          label="库类型"
          name="table_type">
          {/* <Select options={tableTypeOptions} /> */}
          <Radio.Group optionType="button" buttonStyle="solid"
            options={this.state.tableTypeOptions} />
        </Form.Item>
        <Form.Item
          label="测量点"
          name="measurement"
          rules={[
            {
              required: true,
              message: '请选择测量点!',
            },
          ]}>
          <MeasurementTree tableType={state.tableType} />
        </Form.Item>
      </Form>
    );

    const form2 = (
      <Form
        colon={false}
        labelCol={{ span: 4, }}
        wrapperCol={{ span: 20, }}
        ref={this.form2Ref}
        initialValues={initialValues}>

        <Form.Item
          label={intl.messages.label_zero}
          tooltip={intl.messages.tooltip_zero}
          name="zero"
          valuePropName="checked">
          <Checkbox />
        </Form.Item>
        <Form.Item
          label={intl.messages.label_ratio}
          tooltip={intl.messages.tooltip_ratio}
          name="ratio">
          <InputNumber placeholder='1' />
        </Form.Item>
      </Form>
    );

    const items = [
      {
        key: '1',
        label: `数据源`,
        children: form1,
        forceRender: true,
      },
      {
        key: '2',
        label: `配置信息`,
        children: form2,
        forceRender: true,
      }
    ];

    return (
      <Drawer title="实时填充"
        width={550}
        zIndex={1020}
        bodyStyle={{ paddingTop: 0 }}
        open={open}
        onClose={onCancel}
        extra={
          <Space>
            <Button onClick={onCancel}>取消</Button>
            <Button onClick={this.handleSubmit} type="primary">
              确定
            </Button>
          </Space>
        }>

        <Tabs activeKey={state.activeKey} items={items} onChange={this.onTabChange} />
      </Drawer>
    )
  }
}

export default FillRealChooser